<template>
  <div class="box">
    <my-space />
    <div class="up">
      <div class="up-left">
        <img src="/IMG/touxiang/lx.webp" alt="" />
      </div>
      <div class="up-center">
        <span class="center-up">
          刘小怂
          <em class="el-icon-message-solid"></em>
        </span>
        <span class="center-center"
          >简介:生为冰山 就该淡淡地爱海流 爱风 并且在偶然接触时
          全心全意地爱另一座冰山。</span
        >
        <ul class="center-down">
          <li><em class="el-icon-trophy"></em>6</li>
          <li><em class="el-icon-star-off"></em>66</li>
          <li><em class="el-icon-bell"></em>88</li>
        </ul>
      </div>
      <div class="up-right">
        <span>修改信息</span>
      </div>
    </div>
    <div class="down">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane class="el-item" label="查看点赞" name="first">
          <div class="first-top" v-for="x in 15" :key="x">
            <span class="msg">刘小怂赞了您的评论:</span>
            <div class="item">
              <div class="uheader">
                <img src="/IMG/touxiang/lx.webp" alt="" />
              </div>
              <div class="utalks">
                <span class="uname">
                  刘小怂
                  <em class="el-icon-message-solid"></em>
                </span>
                <span class="uword"
                  >我坐着看,躺着看,趴着看,跪着看,想怎么看就怎么看!你在教我做事?</span
                >
                <div class="time-pl">
                  <span class="one">10分钟</span>
                  <span class="two">
                    <em class="el-icon-trophy">6</em>
                    <em class="el-icon-chat-dot-round">8</em>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane class="el-item" label="查看回复" name="second">
          <div class="first-top" v-for="x in 15" :key="x">
            <span class="msg">刘小怂回复了您:</span>
            <div class="item">
              <div class="uheader">
                <img src="/IMG/touxiang/lx.webp" alt="" />
              </div>
              <div class="utalks">
                <span class="uname">
                  刘小怂
                  <em class="el-icon-message-solid"></em>
                </span>
                <span class="uword"
                  >我坐着看,躺着看,趴着看,跪着看,想怎么看就怎么看!你在教我做事?</span
                >
                <div class="text">
                  <span>
                    原文:
                    <span>
                      我坐着看,躺着看,趴着看,跪着看,想怎么看就怎么看!你在教我做事?
                    </span>
                  </span>
                  <span class="uname">
                    <em class="el-icon-s-custom">刘小怂</em>
                  </span>
                </div>
                <div class="time-pl">
                  <span class="one">10分钟</span>
                  <span class="two">
                    <em class="el-icon-trophy">6</em>
                    <em class="el-icon-chat-dot-round">8</em>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane class="el-item" label="查看收藏" name="third">
          <div class="first-top" v-for="x in 15" :key="x">
            <span class="msg">刘小怂收藏了您发布的内容:</span>
            <div class="list-item">
              <router-link to="/bookdetails" class="left">
                <img src="/IMG/book/renjian.png" alt="" />
              </router-link>
              <div class="right">
                <router-link to="/bookdetails" class="bookname">
                  人间失格
                </router-link>
                <span class="writer">作者:太宰治</span>
                <span class="user">
                  推荐人:刘小怂
                  <em class="el-icon-message-solid"></em>
                </span>
                <span class="word"
                  >推荐语:胆小鬼连幸福都会害怕，碰到棉花都会受伤，有时还被幸福所伤。</span
                >
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import MySpace from "./MySpace.vue";
export default {
  components: { MySpace },
  data() {
    return {
      activeName: "first",
    };
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  user-select: none;
}
ul,
ol {
  list-style: none;
}
*a {
  text-decoration: none;
  color: #000;
}
.box {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  > .up {
    margin: 15px 0;
  }
  .up {
    // height: 600px;
    display: flex;
    justify-content: space-around;

    .up-left {
      // width: 500px;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 150px;
        height: 150px;
        border-radius: 50%;
      }
    }
    .up-center {
      // width: 1000px;
      display: flex;
      flex-direction: column;
      margin: 15px 20px;

      .center-up {
        margin: 15px 20px;
      }
      .center-center {
        margin: 15px 20px;
      }

      .center-down {
        display: flex;
        justify-content: flex-end;
        margin: 15px 20px;
        li {
          padding-left: 25px;
          em {
            padding-right: 5px;
          }
        }
      }
    }
    .up-right {
      // width: 100px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      span {
        padding: 15px 15px;
        border-radius: 10px;
        background-color: #666;
        color: white;
        &:hover {
          background-color: #46aaff;
        }
      }
    }
  }
}
.el-item {
  .first-top {
    display: flex;
    flex-direction: column;
    // margin: 15px 0;
    padding: 20px;
    border-bottom: 1px solid black;

    .msg {
      margin: 15px 0 0 20px;
    }
    .list-item {
      display: flex;
      justify-content: space-between;
      margin: 15px 0;

      .left {
        img {
          width: 130px;
          height: 100%;
          margin-left: 20px;
        }
      }
      .right {
        width: 100%;
        display: flex;
        flex-direction: column;
        margin: 0 15px 0 15px;

        span {
          margin: 10px;
          display: inline-block;
        }

        .bookname {
          display: flex;
          margin-top: 15px;
          justify-content: flex-start;
          font-size: 1.8rem;
          font-weight: 400;
        }
        .writer {
          display: flex;
          justify-content: flex-end;
        }
        .user {
          display: flex;
          justify-content: flex-end;
          margin-right: 20px;
          font-size: 1.2rem;
        }
        .word {
          margin-top: 10px;
          font-size: 1rem;
        }
      }
    }
  }

  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .text {
      display: flex;
      flex-direction: column;
      span > span {
        // background: #f7f8fa;
        font-size: 14px;
        color: #999;
        height: 40px;
        line-height: 40px;
        padding-left: 10px;
        // margin-bottom: 8px;
        overflow: hidden;
      }
      .uname {
        display: flex;
        justify-content: flex-end;
      }
    }

    img {
      width: 50px;
      height: 50px;
      margin: 20px;
      border-radius: 50%;
    }
    .utalks {
      width: 100%;
      display: flex;
      flex-direction: column;
      .uname {
        font-size: 14px;
        color: #999;
        margin: 15px 0;
      }
      .uword {
        margin: 15px 0;
      }
      .word {
        background: #f7f8fa;
        font-size: 14px;
        color: #999;
        height: 40px;
        line-height: 40px;
        padding-left: 10px;
        margin-bottom: 8px;
        overflow: hidden;
      }
      .time-pl {
        // width: 100%;
        display: flex;
        justify-content: space-between;

        .one {
          margin: auto 0;
          text-align: center;
        }
        .two {
          margin-right: 15px;

          em {
            padding: 10px;
          }
        }
      }
    }
  }
}
</style>